<script minify>
import { humanify } from "@servicestack/client"

App.component('Input', ({ input, model, api }) => {
    return {
        $template: '#input-template',
        input,
        model: model || {},
        get error() { return resolve(api, x => x && x.error) },
        kvpValues(input) {
            return resolve(input.allowableEntries) || (resolve(input.allowableValues)||[]).map(x => ({ key:x, value:x }))
        },
        useLabel(input) {
            return input.label != null ? input.label : humanify(input.id)
        },
        usePlaceholder(input) {
            return input.placeholder || '' 
        },
        fieldError(id) {
            let error = this.error
            let fieldError = error && error.errors && error.errors.find(x => x.fieldName.toLowerCase() === id.toLowerCase());
            return fieldError && fieldError.message
        },
        hasError(id) { return !!this.fieldError(id) },
        inputClass(input) {
            return ['block w-full sm:text-sm rounded-md', !this.fieldError(input.id)
                ? 'shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300'
                : 'pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500'].join(' ')
        },
        ariaDescribedby(input) {
            return this.fieldError(input.id) ? `${input.id}-error` : input.help ? `${input.id}-description` : null
        },
    }
})
</script>
<!--minify-->
<template id="input-template">
<div v-if="input.type=='divider'" class="border-t"></div>
<input v-else-if="input.type=='hidden'" v-bind="input" type="hidden" v-model="model[input.id]" />
<div v-else-if="input.type=='checkbox'" class="relative flex items-start">
    <div class="flex items-center h-5">
        <input v-bind="input" type="checkbox" v-model="model[input.id]"
               :aria-invalid="hasError(input.id)" :aria-describedby="ariaDescribedby(input)"
               class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
    </div>
    <div class="ml-3 text-sm">
        <label v-if="useLabel(input)" :for="input.id" class="font-medium text-gray-700 select-none"
               v-html="useLabel(input)"></label>
        <p v-if="fieldError(input.id)" class="text-red-500" v-html="fieldError(input.id)"></p>
        <p v-else-if="input.help" class="text-gray-500" v-html="input.help"></p>
    </div>
</div>
<div v-else>
    <label v-if="useLabel(input)" :for="input.id" class="block text-sm font-medium text-gray-700"
           v-html="useLabel(input)"></label>
    <div class="mt-1 relative rounded-md shadow-sm">
        <select v-if="input.type=='select'" v-bind="input"
                :aria-invalid="hasError(input.id)" :aria-describedby="ariaDescribedby(input)"
                :class="inputClass(input)" v-model="model[input.id]">
            <option v-if="input['data-type']=='Nullable`1'"></option>
            <option v-for="entry in kvpValues(input)" :value="entry.key">{{entry.value}}</option>
        </select>
        <textarea v-else-if="input.type=='textarea'" v-bind="input" :placeholder="usePlaceholder(input)"
                  :aria-invalid="hasError(input.id)" :aria-describedby="ariaDescribedby(input)"
                  :class="inputClass(input)" v-model="model[input.id]"></textarea>
        <input v-else v-bind="input" v-bind="input" :type="input.type||'text'" :placeholder="usePlaceholder(input)" autocomplete="new-password"
               :aria-invalid="hasError(input.id)" :aria-describedby="ariaDescribedby(input)"
               :class="inputClass(input)" v-model="model[input.id]" />

        <div v-if="fieldError(input.id)" class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
            <!---: Heroicon name: solid/exclamation-circle -->
            <svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
            </svg>
        </div>
    </div>
    <p v-if="fieldError(input.id)" class="mt-2 text-sm text-red-500" :id="`${input.id}-error`" v-html="fieldError(input.id)"></p>
    <p v-else-if="input.help" :id="`${input.id}-description`" class="text-gray-500" v-html="input.help"></p>
</div>
</template>
<!--/minify-->
